<template>
  <ta-drawer
    @close="onClose"
    :visible="state.showUserInfo"
    destroyOnClose
    width="300px"
    wrapClassName="user-menu"
  >
    <div class="user-info">
      <div class="person-head">
        <img :alt="userInfo.userName" :src="require('../../img/' + userInfo.userImg)">
      </div>
      <div>
        <div class="user-name">{{userInfo.userName}}</div>
        <div class="user-position">{{userInfo.mainRoleName}}</div>
      </div>
    </div>
    <div class="menu-item">签到</div>
    <div class="menu-item" @click="changePwd = !changePwd" :class="{active: changePwd}" :style="{'border-color': changePwd ? mainColor: '#fff'}">修改密码</div>
    <div class="user-panel" v-if="changePwd">
      <img src="../../img/user-pw-bg.png" style="width: 100%"/>
      <modify-password @close="changePwd = false"></modify-password>
    </div>
    <div class="menu-item">换肤
      <ul class="menu-color">
        <li v-for="(item, key, index) in colorList" :key="index" :style="{'background-color': item['primary-color']}" @click="themeChange(key)" :class="{'active': key == colorDefault}"></li>
      </ul>
    </div>
    <div class="menu-item">导航模式
      <ul class="menu-mode">
        <li v-for="(item, index) in modeList" :key="index" :style="{'background-image': 'url('+ require('../../img/' + item + '.png') +')'}" @click="modeChange(item)" :class="{'active': item == state.menuType}"></li>
      </ul>
    </div>
    <div class="btn-logout">
      <ta-button block @click="logout()">退出当前账号</ta-button>
    </div>
  </ta-drawer>
</template>
<script>
import modifyPassword from './modifyPassword'
import theme from '@common/js/util/theme'
import {mapGetters} from 'vuex'
const colorList = theme.varsOpt
const modeList = ['left', 'top', 'leftTop']
export default {
  name: 'user-menu',
  components: {modifyPassword},
  data () {
    return {
      changePwd: false,
      colorList,
      modeList,
      colorDefault: 'default'
    }
  },
  mounted () {
    this.colorDefault = localStorage['theme'] || 'default'
    this.$store.dispatch('setStateValue', { theme: this.colorDefault, themeList: this.colorList })
  },
  computed: {
    ...mapGetters({
      state: 'getStateValue',
      mainColor: 'getThemeColor'
    }),
    userInfo () {
      return this.state.userInfo
    },
    active () {
      return { color: this.mainColor }
    }
  },
  methods: {
    onClose () {
      this.$store.dispatch('setStateValue', { showUserInfo: false })
      this.changePwd = false
    },
    themeChange (value) {
      this.changePwd = false
      this.colorDefault = value
      localStorage.setItem('theme', value)
      this.$store.dispatch('setStateValue', { theme: value })
      this.$message.success('修改主题色成功')
    },
    modeChange (type) {
      this.changePwd = false
      this.$store.dispatch('setStateValue', { menuType: type })
      this.$message.success('导航模式切换成功')
    },
    // 退出登录
    logout () {
      this.Base.submit(null, {
        url: '/logout',
        frontUrl: top.window.location.href
      }, {
        successCallback: (data) => {
          if (data.serviceSuccess) {
            if (this.userInfo.isSSO == 'false') {
              window.location.href = 'login.html'
            } else {
              top.window.location.href = data.redirectUrl || 'login.html'
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" type="text/scss">
  .user-menu {
    .ant-drawer-body { padding: 24px 0; }
  }
</style>
<style lang="scss" scoped type="text/scss">
  .user-info {
    padding: 0 24px;
    margin-bottom: 25px;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    > div {
      float: left;
      &:first-child {
        width: 60px;
        height: 60px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      &:last-child {
        > div {
          &:first-child {
            font-size: 18px;
            color: $main-ftcolor;
            padding-top: 10px;
            margin-left: 10px;
          }
          &:last-child {
            color: $color-success;
            margin: 5px 0px 0px 10px;
          }
        }
      }
    }
  }
  .menu-item { padding: 10px 24px; cursor: pointer; position: relative; border-left: 3px solid #fff;
    &:after { content: ""; display: block; border-bottom: 1px solid #eee; width: 252px; position: absolute; bottom: 0px; }
    &:hover { background: #fafafa; border-left: 3px solid #fafafa; }
    .menu-color {
      list-style-type: none; margin: 10px 0 0; padding: 0; height: 20px;
      &>li { display: inline-block; width: 20px; height: 20px; border-radius: 2px; margin-right: 5px; vertical-align: top;
        &.active:after { content: "\E632"; font-family: anticon!important; display: block; color: #ffffff; text-align: center; }
      }
    }
    .menu-mode {
      list-style-type: none; margin: 10px 0 0; padding: 0; height: 39px;
      &>li { display: inline-block; width: 48px; height: 39px; margin-right: 8px; vertical-align: top; background-size: contain;
        &.active:after { content: "\E632"; font-family: anticon!important; display: block; color: #001529; text-align: center; line-height: 39px; }
      }
    }
  }
  .btn-logout { margin: 50px 24px 0; }
  .user-panel {
    position: absolute;
    width: 300px;
    height: 100%;
    right: 300px;
    top: 0px;
    overflow: auto;
    z-index: 9999;
    background: #fff;
    @include box-shadow();
    @include beautifyScrollbar();
  }
</style>
